<template>
<div class="runmatter">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>已办事项</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="runmatter_search">
    <ul>
      <li><span>订单编号</span>
        <el-input v-model="order_code" placeholder="请输入订单编号"></el-input>
      </li>
      <li><span>外贸合同号</span>
        <el-input v-model="ftc_code" placeholder="请输入外贸合同号"></el-input>
      </li>
      <li><span>买家名称</span>
        <el-input v-model="buyer_name" placeholder="请输入买家名称"></el-input>
      </li>
      <!-- <li><span>流程发起人</span>
        <el-input v-model="form_inst_name" placeholder="请输入流程发起人"></el-input>
      </li>
      <li ><span>订单流程</span>
        <el-select v-model="flow_id" placeholder="请选择" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li> -->
      <!-- <li><span>订单状态:</span>
        <el-select v-model="from_inst_status" placeholder="请选择">
          <el-option
            v-for="item in options02"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li> -->
      <!-- <li class="blockli"><span>到达时间:</span>
        <div class="block">
            <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </div>
      </li> -->
      <!-- <li class="blockli"><span>发送日期:</span>
        <div class="block">
            <el-date-picker
            v-model="time02"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </div>
      </li> -->
    </ul>
    <el-button type="primary" @click="query">查询</el-button>
  </div>
  <div class="runmatter-table">
    <el-table :data="tableData" style="width: 100%" border stripe v-loading="loading">
      <el-table-column prop="orderCode" label="订单编号" class-name="order_number" width="180px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="getList(scope.$index, scope.row)">{{scope.row.orderCode}}</el-button>
          </template>
      </el-table-column>
      <el-table-column prop="flowName" label="订单流程" min-width="180px">
      </el-table-column>
      <el-table-column prop="formInstStatus" label="订单状态" min-width="100px">
        <template slot-scope="scope">
          <span v-if="scope.row.formInstStatus == 0">流转中</span>
          <span v-if="scope.row.formInstStatus == 1">流转中</span>
          <span v-if="scope.row.formInstStatus == 2">完结</span>
        </template>
      </el-table-column>
      <el-table-column prop="ftcCode" label="外贸合同号" width="300px">
      </el-table-column>
      <el-table-column prop="buyerName" label="买家名称" min-width="300px">
      </el-table-column>
      <el-table-column prop="arrivalTime" label="到达时间" width="180px">
          <template slot-scope="scope">
                {{_getTime(scope.row.arrivalTime)}}
          </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发送时间" width="180px">
          <template slot-scope="scope">
                {{_getTime(scope.row.createTime)}}
          </template>
      </el-table-column>
      <el-table-column prop="currUserName" label="当前审批人" min-width="100px">
      </el-table-column>
      <el-table-column prop="createUserName" label="流程发起人" min-width="100px">
      </el-table-column>      
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize">
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import {getTable} from '@/server/runMatters/index.js'
import {getStore} from '@/assets/js/common'

export default {
  data() {
    return {
        isC: '',//登录名
      order_code: '',//订单编号
      _order_code: '',//订单编号
      ftc_code: '',//外贸合同号
      _ftc_code: '',//外贸合同号
      loading: false,//加载中
      form_inst_name: '',//流程发起人
      _form_inst_name: '',//流程发起人
      buyer_name: '',//买家名称
      _buyer_name: '',//买家名称
      flow_id: '',//订单流程
      userId: '', //用户ID
      _flow_id: '',//订单流程
      from_inst_status: '',//订单状态
      time: '',//时间
      time02: '',//时间2
      _time: '',//时间
      _time02: '',//时间2
      currPage: 1,//默认当前页数
      pageSize: 30,//默认当前页大小
      totalSize: 0,//总数据条数
      options: [{//选择框选项
          value: '1',
          label: '1业务提单'
        }, {
          value: '2',
          label: '2买家付定金给tcf'
        }, {
          value: '3',
          label: '3tcf付定金给工厂'
        }, {
          value: '4',
          label: '4tcf付尾款到工厂'
        }, {
          value: '5',
          label: '5-8单证流程'
        }, {
          value: '6',
          label: '9买家付尾款给tcf'
        }],
        options02: [{//选择框选项
            value: '',
            label: '全部'
          }, {
            value: '1',
            label: '办理中'
          }, {
            value: '2',
            label: '办结'
          }, {
            value: '0',
            label: '取消'
          }],
      tableData: [],//表格数据
    }
  },
  mounted() {

    let userMsgObj = JSON.parse(getStore('userMsg'));
    this.isC = userMsgObj.userName;
    this.userId = userMsgObj.id;
    //默认执行
    this.query();
  },
  methods: {
    //   查询按钮事件
    query() {
        this.currPage = 1;
        this.pageSize = 30;
        this._order_code = this.order_code;
        this._ftc_code = this.ftc_code;
        this._form_inst_name = this.form_inst_name;
        this._buyer_name = this.buyer_name;
        this._flow_id = this.flow_id;
        this._time = this.time;
        this._time02 = this.time02;
        let obj = {
            orderCode: this.order_code,//订单编号
            ftcCode: this.ftc_code,//外贸合同号
            formInstName: this.form_inst_name,//流程发起人、
            buyerName: this.buyer_name,//买家名称
            flowId: this.flow_id,//订单流程
            userId: this.userId,
            currPage: 0,
            pageSize: this.pageSize,
            // from_inst_status: this.from_inst_status,//订单状态
            // lt_arrival_time: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),//时间
            // gt_arrival_time: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),//时间
            // lt_createTime: (this.time02===null) || isNaN(Date.parse(this.time02[0])) ? '' : Date.parse(this.time02[0]),
            // gt_createTime: (this.time02===null) || isNaN(Date.parse(this.time02[1])) ? '' : Date.parse(this.time02[1])
        };
        this.ajaxTable(obj);
    },
    ajaxTable(obj) {
        this.loading = true;
        getTable(obj).then((res)=>{
            try {
                if (res.code === 1) {
                    this.totalSize = res.data.totalSize;
                    this.tableData = res.data.datas;
                } else {
                    this.$message.error('查询失败，请检查网路后重试');
                }
            } catch (e) {
                this.$message.error('查询失败，请检查网路后重试');
            }
            this.loading = false;
        })
    },
    // 点击列表跳转
    getList(index, row){
      // window.location.href = "#/initiatingprocess/" + (!row.flowPath ? '' : row.flowPath) + "?dTab=1&formInstId=" + row.formInstId + "&formServiceName=" + row.formServiceName+"&currNodeId=" + (row.currNodeId===undefined?1:row.currNodeId) + "&flowId=" + row.flowId + "&itemStatus=2" + "&isCreater=" + (row.createUserName != this.isC ? 0 : 1) + "&isHive=1";
      this.$router.push({path: '/initiatingprocess' + (!row.flowPath ? '' : '/' + row.flowPath), query: {dTab: 1, formInstId: row.formInstId, formServiceName: row.formServiceName, currNodeId: (!row.currNodeId ? '' : row.currNodeId), flowId: row.flowId, itemStatus: 2, isCreater: (row.createUserName != this.isC ? 0 : 1), isHive: 1}});
    },
    // 分页每页多少条
    handleSizeChange(val) {
        this.pageSize = val;
        let obj = {
            orderCode: this._order_code,//订单编号
            ftcCode: this._ftc_code,//外贸合同号
            formInstName: this._form_inst_name,//流程发起人、
            buyerName: this._buyer_name,//买家名称
            flowId: this._flow_id,//订单流程
            userId: this.userId,
            currPage: 0,
            pageSize: this.pageSize,
            // from_inst_status: this.from_inst_status,//订单状态
            // lt_arrival_time: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),//时间
            // gt_arrival_time: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),//时间
            // lt_createTime: (this.time02===null) || isNaN(Date.parse(this.time02[0])) ? '' : Date.parse(this.time02[0]),
            // gt_createTime: (this.time02===null) || isNaN(Date.parse(this.time02[1])) ? '' : Date.parse(this.time02[1])
        };
        this.ajaxTable(obj)
    },
    // 分页当前页
    handleCurrentChange(val) {
        this.currPage = val;
        let obj = {
            orderCode: this._order_code,//订单编号
            ftcCode: this._ftc_code,//外贸合同号
            formInstName: this._form_inst_name,//流程发起人、
            buyerName: this._buyer_name,//买家名称
            flowId: this._flow_id,//订单流程
            userId: this.userId,
            currPage: val - 1,
            pageSize: this.pageSize,
            // from_inst_status: this.from_inst_status,//订单状态
            // lt_arrival_time: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),//时间
            // gt_arrival_time: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),//时间
            // lt_createTime: (this.time02===null) || isNaN(Date.parse(this.time02[0])) ? '' : Date.parse(this.time02[0]),
            // gt_createTime: (this.time02===null) || isNaN(Date.parse(this.time02[1])) ? '' : Date.parse(this.time02[1])
        };
        this.ajaxTable(obj);
    },
    // 将时间戳转化为时间字符串
    _getTime(x){
        if(x === null || x === undefined || x === ''){
            return '-'
        }
        let time = new Date(x);
        return time.getFullYear() + '/' + (time.getMonth() + 1) + '/' + time.getDate();
    },
  }
}
</script>

<style scoped lang="sass">

@import "../../assets/css/common.sass"

.runmatter
  width: 100%
  padding: 20px
  box-sizing: border-box
  .runmatter_search
    width: 100%
    border: 1px solid #ebebeb
    border-radius: 4px
    padding: 20px
    padding-bottom: 10px
    box-sizing: border-box
    &::after
      @include  clear
    ul
      width: 90%
      float: left
      &:after
        @include clear
      li
        width: 33%
        float: left
        padding-right: 10px
        box-sizing: border-box
        margin-bottom: 10px
        span
          font-size: 14px
          display: inline-block
          width: 80px
        .el-input, .el-select,
          width: 65%
        .block
          width: 75.5%
          display: inline-block
          div
            width: 100%
      .blockli
        width: 50%
    .el-button
      width: 10%
      height: 40px
.el-select-dropdown__item
  padding: 0 20px !important
.runmatter-table
  width: 100%
  padding: 20px
  box-sizing: border-box
  border: 1px solid #ebebeb
  border-radius: 4px
  margin-top: 20px
.order_number
  color: #409EFF
</style>
